<script >
import { reactive } from 'vue';

export default{
    name:"App",
    setup(){
        // // 普通函数
        // const obj={
        //     name:"zs",
        //     age:"16"
        // }




        // reactive声明的内容
//         定义响应式数据:
// ·reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据。
// 通常是用来定义响应式对象数据
const obj=reactive({
    name:"zs",
    age:"18"
})
        // 直接通过点击事件修改普通函数里面的内容，updateName方法会被触发但是obj.name值不会被改变
        // 通过updateName点击事件去修改reactive里面的obj.name内容是可以被修改的
        const updateName=()=>{
            console.log(updateName);
            obj.name="ls"
            obj.age="1"
        }
        return {obj,updateName}
    }
}
</script>

<template>
  <div @click="updateName">{{ obj.name }}</div>
  <div>{{ obj.age }}</div>
  <div></div>
</template>

<style lang="scss" scoped>

</style>